<template>
	<view class="content" v-if="isShow" @click.stop="isShow = false">
		<canvas
			@click.stop=""
			:style="{ width: canvasW + 'px', height: canvasH + 'px' }"
			canvas-id="my-canvas"
		></canvas>
		<view class="save-btn" @click.stop="saveImage" v-show="filish">保存图片</view>
	</view>
</template>

<script>
export default {
	props: {
		headerImg: {
			type: String,
			default: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg_yqhy.png'
		},
		title: {
			type: String,
			default: '玛卡巴卡'
		},
		subTitle: {
			type: String,
			default: 'PT6526'
		},
		tipc: {
			type: String,
			default: '红利期仅限100名幸运儿可以获得消费金额免单'
		}
	},
	data() {
		return {
			canvasW: 0,
			canvasH: 0,
			ctx: null,
			isShow: false,
			qrcode: '',
			filish:false,
		};
	},
	methods: {
		//显示
		showCanvas(qrcode) {
			this.isShow = true;
			this.qrcode = qrcode;
			this.__init();
		},
		//初始化画布
		async __init() {
			uni.showLoading({
				title: '海报绘制中...',
				mask: true
			});
			this.ctx = uni.createCanvasContext('my-canvas', this);
			this.canvasW = uni.upx2px(650);
			this.canvasH = uni.upx2px(800);
			//设置画布背景透明
			this.ctx.setFillStyle('rgba(255, 255, 255, 0)');
			//设置画布大小
			this.ctx.fillRect(0, 0, this.canvasW, this.canvasH);
			//绘制圆角背景
			this.drawRoundRect(this.ctx, 0, 50, this.canvasW, this.canvasH-50, uni.upx2px(60), '#FFFFFF');
			//获取标题图片
			let headerImg = await this.getImageInfo(this.headerImg);
			let hW = uni.upx2px(550);
			let hH = uni.upx2px(330);
			//绘制标题图
			this.drawRoundImg(this.ctx, headerImg.path, (this.canvasW - 60) / 2, 30, 60, 60, uni.upx2px(60));
			//绘制标题
			this.ctx.setFontSize(15); //设置标题字体大小
			this.ctx.setFillStyle('#333'); //设置标题文本颜色
			this.ctx.textAlign = 'center';
			this.ctx.fillText(this.title, this.canvasW / 2, (this.canvasW - hW - 180) / 2 + hH + uni.upx2px(60));
			//绘制邀请码
			this.ctx.setFontSize(22);
			this.ctx.setFillStyle('#847FFF');
			this.ctx.textAlign = 'center';
			let sWidth = this.ctx.measureText(this.subTitle).width;
			if (sWidth > hW) {
				this.ctx.fillText(
					this.subTitle.slice(0, 17) + '...',
					this.canvasW / 2,
					(this.canvasW - hW) / 2 + hH + uni.upx2px(110)
				);
			} else {
				this.ctx.fillText(
					this.subTitle,
					this.canvasW / 2,
					(this.canvasW - hW - 170) / 2 + hH + uni.upx2px(110)
				);
			}
			//小程序码
			let qrcodeImg = await this.getImageInfo(this.qrcode);
			this.ctx.drawImage(
				qrcodeImg.path,
				(this.canvasW - 130) / 2,
				(this.canvasW - hW) / 2 + hH + uni.upx2px(0),
				uni.upx2px(260),
				uni.upx2px(260)
			);
			//绘制底部提示
			this.ctx.setFontSize(14);
			this.ctx.setFillStyle('#999999');
			this.ctx.textAlign = 'center';
			this.ctx.fillText(
				this.tipc, 
				this.canvasW / 2, 
				this.canvasW + 40);
			//左边实心圆
			this.drawEmptyRound(this.ctx, 0, (this.canvasW - hW) / 2 - 100 + hH + uni.upx2px(240), uni.upx2px(20));
			//右边实心圆
			this.drawEmptyRound(
				this.ctx,
				this.canvasW,
				(this.canvasW - hW) / 2 - 100 + hH + uni.upx2px(240),
				uni.upx2px(20)
			);
			//延迟渲染
			setTimeout(() => {
				this.ctx.draw(true, () => {
					uni.hideLoading();
					this.filish = true
				});
			}, 500);
		},
		//绘制实心圆
		drawEmptyRound(ctx, x, y, radius) {
			ctx.save();
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
			ctx.setFillStyle('rgba(0, 0, 0, .4)');
			ctx.fill();
			ctx.restore();
			ctx.closePath();
		},
		//带圆角图片
		drawRoundImg(ctx, img, x, y, width, height, radius) {
			ctx.beginPath();
			ctx.save();
			// 左上角
			ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
			// 右上角
			ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
			// 右下角
			ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
			// 左下角
			ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
			ctx.stroke();
			ctx.clip();
			ctx.drawImage(img, x, y, width, height);
			ctx.restore();
			ctx.closePath();
		},
		//圆角矩形
		drawRoundRect(ctx, x, y, width, height, radius, color) {
			ctx.save();
			ctx.beginPath();
			ctx.setFillStyle(color);
			ctx.setStrokeStyle(color);
			ctx.setLineJoin('round'); //交点设置成圆角
			ctx.setLineWidth(radius);
			ctx.strokeRect(x + radius / 2, y + radius / 2, width - radius, height - radius);
			ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
			ctx.stroke();
			ctx.closePath();
		},
		//获取图片
		getImageInfo(imgSrc) {
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: imgSrc,
					success: image => {
						resolve(image);
						console.log('获取图片成功', image);
					},
					fail: err => {
						reject(err);
						console.log('获取图片失败', err);
					}
				});
			});
		},
		//保存图片到相册
		saveImage() {
			//判断用户授权
			uni.getSetting({
				success(res) {
					console.log('获取用户权限', res.authSetting);
					if (Object.keys(res.authSetting).length > 0) {
						//判断是否有相册权限
						if (res.authSetting['scope.writePhotosAlbum'] == undefined) {
							//打开设置权限
							uni.openSetting({
								success(res) {
									console.log('设置权限', res.authSetting);
								}
							});
						} else {
							if (!res.authSetting['scope.writePhotosAlbum']) {
								//打开设置权限
								uni.openSetting({
									success(res) {
										console.log('设置权限', res.authSetting);
									}
								});
							}
						}
					} else {
						return;
					}
				}
			});
			var that = this;
			uni.canvasToTempFilePath(
				{
					canvasId: 'my-canvas',
					quality: 1,
					complete: res => {
						console.log('保存到相册', res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								});
								setTimeout(() => {
									that.isShow = false;
								}, 2000);
							}
						});
					}
				},
				this
			);
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.save-btn {
		margin-top: 100rpx;
		color: #ffffff;
		background: linear-gradient(to right, #fe726b, #fe956b);
		padding: 15rpx 40rpx;
		border-radius: 50rpx;
	}
}
</style>
